
<template>
  <div class="home">
    <div class="banner wrap">
      <img src="../assets/img/首页横幅.png" alt="" />
    </div>
    <div class="content">
      <div class="wrap">
        <jlxTitle title1="精品推荐" :imgSrc="titImg1"></jlxTitle>
        <List
          :arr="JSON.parse(JSON.stringify(goodsArr[0].jingpinArr))"
          maxLength="4"
        ></List>
        <jlxTitle title1="热门兑换" :imgSrc="titImg2"></jlxTitle>
        <List
          :arr="JSON.parse(JSON.stringify(goodsArr[1].remenArr))"
          maxLength="6"
        ></List>
      </div>
    </div>
    <div class="wrap">
      <jlxTitle title1="金币攻略" :imgSrc="titImg3"></jlxTitle>
      <ul class="jinbi">
        <li :style="{ backgroundImage: `url(${jinbiImg1})` }">
          <h3>签到得金币</h3>
          <div>去签到</div>
        </li>
        <li :style="{ backgroundImage: `url(${jinbiImg2})` }">
          <h3>推荐得金币</h3>
          <div>去推荐</div>
        </li>
        <li :style="{ backgroundImage: `url(${jinbiImg3})` }">
          <h3>做任务得金币</h3>
          <div>做任务</div>
        </li>
      </ul>
    </div>
  </div>
</template>
  
  <script>
import jlxTitle from "@/components/home/jlxTitle";
import List from "@/components/home/List";
export default {
  name: "Home",
  components: { jlxTitle, List },
  data() {
    return {
      titImg1: require("../assets/img/拇指.png"),
      titImg2: require("../assets/img/火苗.png"),
      titImg3: require("../assets/img/金币.png"),
      jinbiImg1: require("../assets/img/宝箱.png"),
      jinbiImg2: require("../assets/img/推荐.png"),
      jinbiImg3: require("../assets/img/任务.png"),
      // arr:[{},{}]
      goodsArr: [
        {
          jingpinArr: [
            {
              id: 1,
              Img:"https://gw.alicdn.com/bao/uploaded/i1/2207863144496/O1CN01tbJc6A1j5DUzQIQ03_!!2207863144496.jpg_Q75.jpg_.webp",
              smallImg:[
                  "https://gw.alicdn.com/bao/uploaded/i1/2207863144496/O1CN01tbJc6A1j5DUzQIQ03_!!2207863144496.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i2/2207863144496/O1CN01VatkLN1j5DV29rXYJ_!!2207863144496.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i2/2207863144496/O1CN01lIgZvn1j5DV0R404n_!!2207863144496.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i2/2207863144496/O1CN01TGKuc31j5DV6rt204_!!2207863144496.jpg_Q75.jpg_.webp",
              ],
              detailImg:[
                "https://img.alicdn.com/imgextra/i4/2207863144496/O1CN018s2Oto1j5DVICZ2pb_!!2207863144496.png",
                "https://img.alicdn.com/imgextra/i1/2207863144496/O1CN01vs3Fj71j5DVICYAl2_!!2207863144496.png",
                "https://img.alicdn.com/imgextra/i3/2207863144496/O1CN01Hwn3X41j5DVDTk8yr_!!2207863144496.png",
                "https://img.alicdn.com/imgextra/i2/2207863144496/O1CN01Tab5Ty1j5DVNKVKWQ_!!2207863144496.png",
              ],
              sku:[
                '黑色','蓝色','绿色'
              ],
              name: "短袖",
              coin: 20,
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "BALENCIAGA巴黎世家BALENCIAGA / adidas 男士宽松短袖T恤",
            },
            {
              id: 2,
              Img: "https://img.alicdn.com/imgextra/i2/4066234693/O1CN01vCpXtb1kXRW3EOuUq_!!4066234693.jpg_430x430q90.jpg",
              smallImg:[
                  "https://img.alicdn.com/imgextra/i2/4066234693/O1CN01vCpXtb1kXRW3EOuUq_!!4066234693.jpg_430x430q90.jpg",
                  "https://img.alicdn.com/imgextra/i1/2206385531048/O1CN01LKMstG1Jc1r7zOtca_!!2206385531048.jpg_430x430q90.jpg",
                  "https://img.alicdn.com/imgextra/i2/2206385531048/O1CN01rLDnrA1Jc1r8dY6cr_!!2206385531048.jpg_430x430q90.jpg",
                  "https://img.alicdn.com/imgextra/i4/2206385531048/O1CN014fyGMO1Jc1r4qUpUG_!!2206385531048.jpg_430x430q90.jpg"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i4/2206385531048/O1CN01Hdhn4K1Jc1dMuTFcA_!!2206385531048.jpg",
                  "https://img.alicdn.com/imgextra/i4/2206385531048/O1CN01hPondR1Jc1rA9JcIH_!!2206385531048.jpg",
                  "https://img.alicdn.com/imgextra/i4/2206385531048/O1CN01Cnlnpd1Jc1gVfECNY_!!2206385531048.jpg",
                  "https://img.alicdn.com/imgextra/i1/2206385531048/O1CN01PrKzMn1Jc1qpqS6bi_!!2206385531048.jpg"                
              ],
              sku:[
                '牛皮','鳄鱼皮'
                ],
              name: "手提包",
              coin: "50",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle: "香港直邮潮奢 Coach 男士徽标手提包",
            },
            {
              id: 3,
              Img: "https://gd2.alicdn.com/imgextra/i2/2214144810457/O1CN01GoWy8y1FFLmfVZmR9_!!2214144810457.jpg_400x400.jpg",
              smallImg:[
                  "https://gd2.alicdn.com/imgextra/i2/2214144810457/O1CN01GoWy8y1FFLmfVZmR9_!!2214144810457.jpg_400x400.jpg",
                  "https://gd3.alicdn.com/imgextra/i3/2214448099388/O1CN01N9QgWd2JDl3q45hrU_!!2214448099388.jpg_400x400.jpg",
                  "https://gd3.alicdn.com/imgextra/i3/2214448099388/O1CN01eBlDnb2JDl3djXPra_!!2214448099388.jpg_400x400.jpg",
                  "https://gd4.alicdn.com/imgextra/i4/2214448099388/O1CN01IMJTdQ2JDl3kEP7Wy_!!2214448099388.jpg_400x400.jpg"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i2/1600792131/O1CN01iEogGg1Rc2muhj7lH_!!1600792131.jpg",
                  "https://img.alicdn.com/imgextra/i3/1600792131/O1CN01RAIPg71Rc2n77shan_!!1600792131.jpg",
                  "https://img.alicdn.com/imgextra/i4/1600792131/O1CN016FQvFd1Rc2mtEFwjW_!!1600792131.jpg",
                  "https://img.alicdn.com/imgextra/i3/1600792131/O1CN01HLIaJo1Rc2myZ74YL_!!1600792131.jpg"                
              ],
              sku:[
              '牛皮','鳄鱼皮'
                ],
              name: "皮带",
              coin: "30",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "Gucci古驰皮带经典双G黑色压花古奇腰带男女休闲商务真皮腰链",
            },
            {
              id: 4,
              Img: "https://img.alicdn.com/imgextra/i1/2200657724895/O1CN01Auboto1m1xWmlwL6R_!!2200657724895.jpg_430x430q90.jpg",
              smallImg:[
                  "https://img.alicdn.com/imgextra/i1/2200657724895/O1CN01Auboto1m1xWmlwL6R_!!2200657724895.jpg_430x430q90.jpg",
                  "https://gw.alicdn.com/imgextra/i2/749240762/O1CN010S7pwc1HV2anmRJBk_!!749240762.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i4/749240762/O1CN019IYrWo1HV2aLMZGgC_!!749240762.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i4/749240762/O1CN019Yw8Mp1HV2aLLuia3_!!749240762.jpg_Q75.jpg_.webp"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i1/749240762/O1CN01Zk2g0i1HV2bERHkDB_!!749240762.jpg",
                  "https://img.alicdn.com/imgextra/i1/749240762/O1CN01IJj23j1HV2bLWngdT_!!749240762.jpg",
                  "https://img.alicdn.com/imgextra/i3/749240762/O1CN01HUmAyi1HV2bNLAYz6_!!749240762.jpg",
                  "https://img.alicdn.com/imgextra/i2/749240762/O1CN01nynVyl1HV2Xux0p1Z_!!749240762.jpg"                
              ],
              sku:[
                '九系经典','九系尊享','九系尊享+旅游充电器',
                ],
              name: "剃须刀",
              coin: "100",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "博朗往复式电动剃须刀新9系Pro男士刮胡刀9557CC同款进口",
            },
          ],
        },
        {
          remenArr: [
            {
              id: 5,
              Img: "https://img13.360buyimg.com/n1/s450x450_jfs/t1/179895/10/30383/81809/636e7e3bE8e1843bb/c3bd8e559a21fe79.jpg",
              smallImg:[
                  "https://img13.360buyimg.com/n1/s450x450_jfs/t1/179895/10/30383/81809/636e7e3bE8e1843bb/c3bd8e559a21fe79.jpg",
                  "https://gw.alicdn.com/imgextra/i3/3375655191/O1CN01MKqpet1oDWlGuPCHF_!!3375655191.png_.webp",
                  "https://gw.alicdn.com/imgextra/i1/3375655191/O1CN010DOu6E1oDWk0RFdzS_!!3375655191.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i1/3375655191/O1CN01eBPMZM1oDWk0RFJFR_!!3375655191.jpg_Q75.jpg_.webp"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i3/3375655191/O1CN01N4FBTB1oDWlRsjyFp_!!3375655191.jpg",
                  "https://img.alicdn.com/imgextra/i2/3375655191/O1CN01XYe8en1oDWilSqJ21_!!3375655191.jpg",
                  "https://img.alicdn.com/imgextra/i4/3375655191/O1CN01NbrnMf1oDWleQVlkj_!!3375655191.jpg",
                  "https://img.alicdn.com/imgextra/i4/3375655191/O1CN01CAVkpw1oDWif6qxm6_!!3375655191.jpg"                
              ],
              sku:[
                'i7 12700H钛晶灰','i5 12500H钛晶灰','i7 12700H幻影黑','i5 12500H幻影黑',
                ],
              name: "笔记本",
              coin: "8000",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "联想拯救者Y7000P 2022 英特尔酷睿i5 15.6英寸游戏笔记本电脑(12代i5-12500H 16G 512G RTX3050 2.5k电竞屏)",
            },
            {
              id: 6,
              Img: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/64043/23/19871/262025/62c50258E84d7996b/159481bb66fa5ed8.jpg",
              smallImg:[
                  "https://img14.360buyimg.com/n1/s450x450_jfs/t1/64043/23/19871/262025/62c50258E84d7996b/159481bb66fa5ed8.jpg",
                  "https://gw.alicdn.com/imgextra/i1/2330335711/O1CN011BKrB21s3ggq3gr6p_!!2330335711.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i4/2330335711/O1CN019BLums1s3gh81raUg_!!2330335711.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i1/2330335711/O1CN01LeNdAp1s3ggi4jHiv_!!2330335711.jpg_Q75.jpg_.webp"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i2/2330335711/O1CN01t6OU731s3ghKD9iJ3_!!2330335711.jpg",
                  "https://img.alicdn.com/imgextra/i2/2330335711/O1CN01BF1VJu1s3gj0OekTa_!!2330335711.jpg",
                  "https://img.alicdn.com/imgextra/i3/2330335711/O1CN019L1DTS1s3gj0OeDE2_!!2330335711.jpg",
                  "https://img.alicdn.com/imgextra/i2/2330335711/O1CN01ZDmJkT1s3gj8POwxb_!!2330335711.jpg"                
              ],
              sku:[
                'A87PRO 天空版','A87PRO 黑金刚版','A87 天空版','A87 黑金刚版'
                ],
              name: "键盘",
              coin: "500",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "达尔优(dareu)A87pro无线三模客制化游戏机械键盘可插拔轴gasket结构PBT键帽87键RGB背光天空轴V3-天空版",
            },
            {
              id: 7,
              Img: "https://img11.360buyimg.com/n1/s450x450_jfs/t1/64858/23/17025/163740/613729bfE5c9c75dd/1e79132378a2d475.jpg",
              smallImg:[
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/64858/23/17025/163740/613729bfE5c9c75dd/1e79132378a2d475.jpg",
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/165589/22/4411/258236/601518b6E868051d3/0f947799e24dbf66.jpg",
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/139888/2/10548/128575/5f855a5dE56cca385/0b2246717d9f079a.jpg",
                "https://img11.360buyimg.com/n1/s450x450_jfs/t1/150142/2/10554/85330/5f855a5eE9b217e45/ae0cf287f89abc63.jpg"

              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i2/2863054326/O1CN01yEXvKU1hpM8rzV8VK_!!2863054326.jpg",
                  "https://img.alicdn.com/imgextra/i2/2863054326/O1CN01yEXvKU1hpM8rzV8VK_!!2863054326.jpg",
                  "https://img.alicdn.com/imgextra/i2/2863054326/O1CN01FPAs7h1hpM8tkIjyK_!!2863054326.jpg",
                  "https://img.alicdn.com/imgextra/i2/2863054326/O1CN01Rr9Osv1hpM8wSqLrX_!!2863054326.jpg"                
              ],
              sku:['黑色','白色','海克斯限定'],
              name: "鼠标",
              coin: "200",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "罗技(G) G502 HERO主宰者 游戏鼠标 有线鼠标 电竞机械 吃鸡大手 男生 【鼠标+GHUB套装】G502 HERO",
            },
            {
              id: 8,
              Img: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/181202/40/28316/79621/6305e8c0Ea0133f5e/68bb224d65aa640d.jpg",
              smallImg:[
                  "https://img14.360buyimg.com/n1/s450x450_jfs/t1/181202/40/28316/79621/6305e8c0Ea0133f5e/68bb224d65aa640d.jpg",
                  "https://gw.alicdn.com/imgextra/i3/467098491/O1CN019R8MdX2Cavl3MIn7m-467098491.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i4/467098491/O1CN01s9G6ul2CavlreLcUt-467098491.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i3/467098491/O1CN01g0EUyL2CavmJ2YARu-467098491.jpg_Q75.jpg_.webp"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i4/467098491/O1CN01I1PU6o2CavmX4skXO_!!467098491.jpg",
                  "https://img.alicdn.com/imgextra/i4/467098491/O1CN01NbpVmZ2CavhqbQUEr_!!467098491.jpg",
                  "https://img.alicdn.com/imgextra/i2/467098491/O1CN01QfCpUw2CavkyGnd98-467098491.jpg",
                  "https://img.alicdn.com/imgextra/i1/467098491/O1CN01LhjIgm2Cavma0mf2B_!!467098491.jpg"                
              ],
              sku:[
                '22.5w快充版 2输出 3输入','22.5w快充版 3输出 2输入','10w普充版'
                ],
              name: "充电宝",
              coin: "90",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "品胜 22.5W超级快充20000mAh双向快充电宝便携大容量PD20W移动电源三入三出Type-C",
            },
            {
              id: 9,
              Img: "https://img14.360buyimg.com/n1/s450x450_jfs/t1/79746/10/9006/115281/5d6dbe17E7e96eeb0/5ae0b4962dc172b1.jpg",
              smallImg:[
                  "https://img14.360buyimg.com/n1/s450x450_jfs/t1/79746/10/9006/115281/5d6dbe17E7e96eeb0/5ae0b4962dc172b1.jpg",
                  "https://gw.alicdn.com/imgextra/O1CN01jtX5sD1kzNh2zPMTO_!!2340934754-0-picasso.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i2/2340934754/O1CN01Zv1YUp1kzNfrJJC3O_!!2340934754.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i1/2340934754/O1CN018mcf8y1kzNfyN4VvF_!!2340934754.jpg_Q75.jpg_.webp"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i4/2340934754/O1CN01PuReSo1kzNgyrXKIg_!!2340934754.jpg",
                  "https://img.alicdn.com/imgextra/i4/2340934754/O1CN01TDOdP71kzNgvDJX3d_!!2340934754.jpg",
                  "https://img.alicdn.com/imgextra/i2/2340934754/O1CN01GpQWiP1kzNe5uSNbI_!!2340934754.jpg",
                  "https://img.alicdn.com/imgextra/i3/2340934754/O1CN01p7iIOq1kzNgRibdNn_!!2340934754.jpg"                
              ],
              sku:[
                '32G','64G','128G'
                ],
              name: "U盘",
              coin: "30",
              isHotSale: 1,
              isLatest: 0,
              seriesSubTitle:
                "闪迪 (SanDisk) 128GB USB3.0 U盘CZ73酷铄 小巧便携 安全加密 学习办公 大容量优盘",
            },
            {
              id: 10,
              Img: "https://img10.360buyimg.com/n1/jfs/t1/112751/22/7527/246936/5ec3f8a1Eb9ea1cad/f96c1b8324fce91d.png",
              smallImg:[
                  "https://img10.360buyimg.com/n1/jfs/t1/112751/22/7527/246936/5ec3f8a1Eb9ea1cad/f96c1b8324fce91d.png",
                  "https://gw.alicdn.com/imgextra/i3/1070059516/O1CN01371Maf2KANgR0EOBC_!!1070059516.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i4/1070059516/O1CN01KibA5u2KANfxkE7K6_!!1070059516.jpg_Q75.jpg_.webp",
                  "https://gw.alicdn.com/imgextra/i2/1070059516/O1CN01iHql2h2KANfysi1wL_!!1070059516.jpg_Q75.jpg_.webp"                
              ],
              detailImg:[
                  "https://img.alicdn.com/imgextra/i4/1070059516/O1CN01wfxsrs2KANl5ile7q_!!1070059516.jpg",
                  "https://img.alicdn.com/imgextra/i2/1070059516/O1CN016UhSlO2KANlB8fJgv_!!1070059516.jpg",
                  "https://img.alicdn.com/imgextra/i1/1070059516/O1CN01amsNHE2KANbQPEysq_!!1070059516.jpg",
                  "https://img.alicdn.com/imgextra/i1/1070059516/O1CN01MwVplF2KANk3mEzSI_!!1070059516.png"                
              ],
              sku:[
                '苹果银','苹果灰'
                ],
              name: "电脑支架",
              coin: "50",
              isHotSale: 0,
              isLatest: 1,
              seriesSubTitle:
                "诺西 N8笔记本支架 N3电脑支架桌面增高托架两层铝合金散热器折叠便携式支撑底座手提颈椎升降悬空架子",
            },
          ],
        },
      ],
    };
  },
};
</script>
  
  <style lang="less" scoped>
.banner {
  padding-bottom: 30px;
  img {
    width: 1200px;
  }
}
.content {
  background-color: #f5f5f5;
  padding-bottom: 30px;
}
.jinbi {
  display: flex;
  justify-content: space-between;
  padding-bottom: 30px;
  li {
    width: 285px;
    height: 168px;
    color: #fff;
    padding: 20px 10px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-size 0.4s linear;
    background-size: 100% 100%;
    &:hover {
      background-size: 105% 105%;
    }
    h3 {
      font-size: 24px;
      margin-bottom: 19px;
    }
    div {
      width: 96px;
      height: 27px;
      border: 1px solid #ffffff;
      text-align: center;
      line-height: 27px;
    }
  }
}
</style>
  
  
  